<template>
  <!-- 返回 -->
  <view class="patentDetails">
    <navTabrBack
      :navbackStyle="[]"
      :titleStyle="['margin-left: 27rpx;']"
      :title="'我的'"
    ></navTabrBack>
    <!-- useInfo -->
    <view>
      <view class="useInfo">
        <image class="useImg" :src="img+userInfo?.headerImg" mode="scaleToFill" />
        <view style="flex: 1 0">
          <view class="userAdd">
            <view class="userNamePhone">
              <view class="useName">{{ userInfo?.nickName }}</view>
              <view class="usePhon"
                >联系电话：{{ userInfo?.phone?.length != 0 ? userInfo?.phone : "暂无电话号码！" }}</view
              ></view
            >
            <view v-show="isOk">
            <button v-if="isShow">
              <view class="iconfont icon-duihao"></view>已关注
            </button>
            <button v-else="isShow">
              <view @click="editUseAdd" class="iconfont icon--jia"></view>关注
            </button></view
          ></view>
          <view class="useExpLain">{{
            userInfo?.email?.length != 0
              ? userInfo?.email
              : "这个家伙很懒，什么都没有留下…"
          }}</view>
        </view>
      </view>
      <!-- DataSum -->
      <view class="essay">
        <view class="dataSum">
          <view class="item">
            <view class="sum">{{ total }}</view>
            <view class="Title">共享专利集</view>
          </view>
          <view class="border"></view>
          <view class="item">
            <view class="sum">{{ userInfo.followNum }}</view>
            <view class="Title">粉丝数</view>
          </view>
        </view>
        <view></view>
      </view>
    </view>
    <!-- 全部委托 -->
    <view class="entrustAll">
      <text class="entAllTitle">全部共享专利集</text>
    </view>
    <!-- 展示列表 -->
    <view class="serchItem" v-for="(item, index) in dataList" :key="index">
      <image
        class="serchItemImg"
        :src="img + item.img "
      />
      <view @click="toAddMyDataList(item.ID)">
        <view class="patentTitle1">{{ item.name }}</view>
        <view class="patentClassify"
          >
          <!-- <view class="partake" v-if="item.status == 1">已共享</view> -->
          <!-- {{ item.orderNum }}条， -->订阅{{ item.audit_status }}次</view
        >
      </view>
    </view>
  </view>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="订阅成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { inject, reactive, toRefs, ref } from "vue";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
const $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  userId: null,
  userInfo: {},
  isShow: true,
  page: 1,
  dataList: [],
  isOk: true,
  img: "",
  total: 0
});
let { img, userInfo, isShow, dataList, isOk, total } = toRefs(data);
let success = ref();
onLoad((res) => {
  data.page = 1
  console.log(res);
  data.dataList = []
  data.img = $imgSrc
  console.log(res.isOk);
  if(res.isOk == 0) data.isOk = false
  data.userId = res.id;
  userDataList();
  pullUserInfo();
  // 判断用户是否登录
  uni.getStorage({
    key: "useInfo",
    success: function (res) {},
    fail: (err) => {},
  });
});
onReachBottom(() => {
  data.page = data.page + 1;
  userDataList();
});
onPullDownRefresh(() => {
  data.dataList = []
  data.page = 1;
  userDataList();
  uni.stopPullDownRefresh();
});
const pullUserInfo = () => {
  uni.request({
    url: $url + `/base/getUserInfoById?ID=${data.userId}`,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.userInfo = res.data.data.userInfo
    },
  });
};

// 获取当前用户专利集
const userDataList = () => {
  uni.request({
    url: $url + `/base/getZlGroupList?page=${data.page}&pageSize=10&status=1&userId=${data.userId}`,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.total = res.data.data.total
      res.data.data.list.map((item) => {
        data.dataList.push(item);
      });
    },
  });
};

const toAddMyDataList = (id) => {
  uni.navigateTo({
    url: `/pages/creamDetails/index?id=${id}`,
  });
};
// 关注

const editUseAdd = () => {
  uni.getStorage({
    key: "useInfo",
    fail: (err) => {
      uni.navigateTo({
        url: "/pages/login/login?type=1",
      });
    },
    success: function (res) {
      if (res.data.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      uni.request({
        url: $url + `/zlOrder/createZlOrder`,
        method: "POST",
        timeout: 6000,
        header: {
          "x-token": res.data.token,
        },
        data: { groupId: data.userId * 1 },
        success(res) {
          success.value.open();
        },
        fail: (err) => {
          uni.navigateTo({
            url: "/pages/login/login?type=1",
          });
        },
      });
    },
  });
};
</script>

<style scoped>
.sum {
  text-align: center;
}
.fenxiang {
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  margin-bottom: 47rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.fenxiang text {
  color: #666666;
}
.fenxiang view {
  margin-left: 45rpx;
}
.partake {
  margin-right: 5rpx;
  width: 92rpx;
  height: 27rpx;
  background: #1677ff;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 7rpx;
  font-size: 22rpx;
  text-align: center;
  line-height: 27rpx;
  font-weight: 400;
  color: #ffffff;
}

.entAllTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.entrustAll {
  padding: 28rpx;
  margin: 36rpx 0;
}
.newEnt {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 27rpx;
}
.serchItemImg {
  margin-right: 16rpx;
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(227, 227, 227, 0.5);
  border-radius: 11rpx;
}
.patentTitle1 {
  margin-top: 7rpx;
  width: 475rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.dataList {
  padding-bottom: 1rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
}
.addItemTitle {
  display: flex;
  align-items: center;
  padding-left: 27rpx;
  margin-bottom: 24rpx;
  height: 108rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  border-bottom: 1rpx solid #dfdfdf;
}
.userNamePhone {
  flex: 1;
  overflow: hidden;
  width: 350rpx;
}
.userAdd {
  display: flex;
}
.userAdd button {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  width: 145rpx;
  height: 54rpx;
  background: #599eff;
  border-radius: 27rpx;
  font-size: 22rpx;
  color: #fff;
}
.userAdd button .iconfont {
  margin-right: 12rpx;
  font-size: 22rpx;
}
.patentDetails {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100%;
  min-height: 410rpx;
  padding: 0 28rpx;
  padding-bottom: 40rpx;
}
.patentNum {
  margin: 28rpx auto 36rpx auto;
  width: 694rpx;
  height: 447rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 7rpx 0rpx #ebebeb;
  border-radius: 11rpx;
}
.numDetail {
  height: 72rpx;
  background: #f1f7ff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
  padding: 18rpx 0 0 36rpx;
  margin-bottom: 18rpx;
}
.detailItem {
  padding: 0 32rpx 0 36rpx;
  display: flex;
  margin-bottom: 15rpx;
}
.patentTitle {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.patentText {
  flex: 1;
  width: 500rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentDeict {
  width: 694rpx;
  background: #ffffff;
  box-shadow: 2rpx 2rpx 11rpx 0rpx rgba(235, 235, 235, 0.5), 0rpx 2rpx 7rpx 0rpx #e8e8e8;
  border-radius: 11rpx;
  margin-bottom: 38rpx;
  padding-bottom: 24rpx;
}
.deictTitle {
  height: 80rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  line-height: 80rpx;
  margin-left: 29rpx;
  margin-right: 32rpx;
  border-bottom: 4rpx dashed #999999;
}
.mainText {
  padding: 26rpx 24rpx 10rpx 28rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
}
/* 按钮 */
.addPatent {
  height: 91rpx;
  line-height: 91rpx;
  background: #1677ff;
  box-shadow: 2rpx 2rpx 9rpx 0rpx #c3c3c5;
  border-radius: 44rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 30rpx;
}
/* 添加专利集 */
.dataList {
  width: 100%;
  height: 645rpx;
  background: #ffffff;
  border-radius: 11rpx 11rpx 0rpx 0rpx;
}
.addItemTitle {
  display: flex;
  align-items: center;
  height: 108rpx;
  border-bottom: 2rpx solid #dfdfdf;
  padding-left: 27rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  margin-bottom: 18rpx;
}
.scroll-Y {
  height: 480rpx;
}
.addItem {
  margin: 0 32rpx 18rpx 27rpx;
  display: flex;
  align-items: center;
}
.addItem image,
.addItem .iconfont {
  margin-right: 27rpx;
  width: 109rpx;
  height: 109rpx;
  background: #e5e3e6;
  border-radius: 14rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50rpx;
  color: #999999;
}
.addName {
  font-size: 29rpx;
  width: 500rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  color: #333333;
}
.addNum {
  margin-top: 8rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
.essay {
  /* display: flex;
  align-items: center; */
  margin: 31rpx 27rpx 0 27rpx;
  border-radius: 11rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(230, 230, 230, 0.5);
  border-radius: 11rpx;
}
.entTitle {
  padding-top: 30rpx;
  padding-left: 27rpx;
  font-size: 33rpx;
  font-weight: 700;
  color: #000000;
}
.edit {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 15rpx;
  margin-left: 20rpx;
  width: 164rpx;
  height: 54rpx;
  background: #b1ccff;
  border-radius: 181rpx 0rpx 0rpx 181rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #ffffff;
}
.useInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 27rpx;
}
.useImg {
  width: 109rpx;
  height: 109rpx;
  background: #d8d8d8;
  border-radius: 50%;
  margin: 0 28rpx;
}
.useName {
  font-size: 29rpx;
  font-weight: 700;
  color: #333333;
}
.usePhon {
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
}
.useExpLain {
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.dataSum {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 80rpx;
  width: 100%;
  padding: 25rpx 0 23rpx 0;
}
.border {
  width: 0;
  height: 80rpx;
  border-right: 1rpx solid #d7d7d7;
}
</style>
